<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="taglib" prefix="pln" %>

<h3><i class="general foundicon-paper-clip"></i>Grilla de Pagina</h3>
<p class="note">Selecciona un tipo de grilla para tu pagina.</p>     

<span id="pageInfo" data-pageId="${page.id}" data-pageType="${page.pageType}"></span>
<div id="page_templates" class="layout-selector">
       <ul>
        	<c:forEach  items="${config.imageGalTemplates}" var="template" varStatus="status">
        		<li id="template-${template}" data-template="${template}" class="${page.template eq template ? 'active' : ''}">
            		<img src="${pageContext.request.contextPath}/images/structure/${template}.jpg">
           			<input name="layout" type="radio" value="layout-${template}" ${page.template eq template ? 'checked' : ''} />
            	</li>
			</c:forEach>               
     	
       </ul>
                            
</div> 

<h3><i class="gen-enclosed foundicon-tools"></i>Crea una Galeria</h3>
<p class="note">Edita o crea una nueva Galeria.</p>   

<section class="header_categories">

<select class="form-control" name="" id="galleries">
	<option value="">Editar una galeria</option>
	<c:forEach  items="${page.imageGalleries}" var="gallery" varStatus="status">
	<option value="${gallery.id}">${gallery.name}</option>
    </c:forEach> 
</select>

<span id="new_galery_button">
	<i class="general foundicon-add-doc"></i><a  data-toggle="modal" href="#new_galery_modal" class="">Agregar nueva galeria</a>
</span>

<!-- Modal crear nueva galeria -->
  <div class="modal fade" id="new_galery_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4>Crear una nueva Galeria</h4>
        </div>
        <div class="modal-body page_selector_box">
			<div class="container">
				<input class="form-control"  id="new_galery_id" name="id" type="hidden" value=""/>
				<input class="form-control" id="new_galery_name" name="name" type="text" placeholder="Nombre de la Galeria" />
				<textarea class="form-control" id="new_galery_description" name="description"  placeholder="Descripcion de la galeria"></textarea>
			</div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
          <button type="button" class="btn btn-primary" id="createGalButton">Crear</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modadl -->

</section>

<div id="gallery_edit_section" style="display:none">
<h3><i class="general foundicon-paper-clip"></i>Editando "nombre de la galeria" </h3>
<p class="note">Carga, modifica o elimina las imagenes de tu galeria.</p>  

	<input class="form-control" id="edit_gallery_name" name="name" type="text" placeholder="Aca se edita el Nombre de la galeria" />
	<textarea class="form-control" id="edit_gallery_description" name="description"  placeholder="Aca se edita la descripcion de la galeria"></textarea>

<div class="form-actions">
    <button id="create_new_gallery_picture" type="submit" class="btn">Agregar una nueva imagen</button>
</div>

				

		<section class="upload_post" id="upload_gallery_picture" style="">
			<div id='imageContainer_gallery1'>
				<div class="actions upload">
					<button class='uploder_button btn btn-default' id="img_gal">SUBIR IMAGEN</button>
					<input class='fileupload' type='file' name='files[]' data-url='controller/upload.htm' data-uploaderid='gallery'>
					<div id='dropzone_gallery' class='dropzone'>Drop files here</div>
					<div id='error_msj_gallery' class='errror_msj'></div>
					<div id='progress_gallery' class='progress progress_bar'>
						<div class='bar' style='width: 0%;'></div>
					</div>
					<div id='uploaded-files_gallery' class='uploaded_file' data-key='gallery' data-type='gallery'></div>
				</div>
			</div>
			<form id='imageForm_gallery' data-formtype='archiveForm'>
			<input class="form-control"  id="id" name="id" type="hidden" value=""/>
			<input class="form-control" id="gal_title" name="title" type="text" value="" placeholder="Titulo" />
			<textarea class="form-control" id="gal_text" name="caption" placeholder="text"></textarea>
			<input class="form-control" id="gal_tags" name="tags" type="text" value="" placeholder="tags, tags, tags, tags" />
			</form>
			<button class='btn btn-primary sendCrop' data-uploaderid='gallery'>Agregar</button>
		</section>
		
		<!-- Table listado de imagenes del item-->
		<h4>Listado de imagenes cargadas</h4>
		<table id='' width='100%' border='0' cellspacing='0' cellpadding='0' class='table table-striped'>
			<tr id=''>
				<td><img class='gallery_image' src='/userimages/${website.id}/${archive.image.fileName}'></td>
				<td class='text'>Nombre de la foto ${archive.title}</td>
				<td class='icon'><button class='btn info alternative icon archive edit' data-uploaderid='archive1' data-itemId='${archive.id}'></button></td>
				<td class='icon'><button class='btn danger alternative icon archive remove' data-uploaderid='archive1' data-itemId='${archive.id}'></button></td>
				<td class='icon'><div class='editImage'><span><img class='archive_up' src='css/images/arrow-up.png'/><img class='archive_down' src='css/images/arrow-down.png'/></span></div></td>
			</tr>
			<tr id='archive_${archive.id}'>
				<td><img class='gallery_image' src='/userimages/${website.id}/${archive.image.fileName}'></td>
				<td class='text'>Nombre de la foto 2 ${archive.title}</td>
				<td class='icon'><button class='btn info alternative icon archive edit' data-uploaderid='archive1' data-itemId='${archive.id}'></button></td>
				<td class='icon'><button class='btn danger alternative icon archive remove' data-uploaderid='archive1' data-itemId='${archive.id}'></button></td>
				<td class='icon'><div class='editImage'><span><img class='archive_up' src='css/images/arrow-up.png'/><img class='archive_down' src='css/images/arrow-down.png'/></span></div></td>
			</tr>
			<tr id='archive_${archive.id}'>
				<td><img class='gallery_image' src='/userimages/${website.id}/${archive.image.fileName}'></td>
				<td class='text'>Nombre de la foto 3 ${archive.title}</td>
				<td class='icon'><button class='btn info alternative icon archive edit' data-uploaderid='archive1' data-itemId='${archive.id}'></button></td>
				<td class='icon'><button class='btn danger alternative icon archive remove' data-uploaderid='archive1' data-itemId='${archive.id}'></button></td>
				<td class='icon'><div class='editImage'><span><img class='archive_up' src='css/images/arrow-up.png'/><img class='archive_down' src='css/images/arrow-down.png'/></span></div></td>
			</tr>
		</table>
</div>